<template>
  <div class="shareContainer" ref="shareContainer">
    <div class="sharecontent" v-if="activeName === 'first'">
      <div class="sharecontent_header">
        <div class="sharecontent_header_right">
          <el-button
            v-permission="'earlywarning_rule_create'"
            type="primary"
            plain
            @click="timeVisibleFn"
            data-tracker="P35-1"
            style="margin: 0px 10px 10px 0px"
            >新增</el-button
          >
          <el-button
            v-permission="'earlywarning_rule_delete'"
            type="primary"
            plain
            @click="deleteRules"
            data-tracker="P35-2"
            style="margin: 0px 10px 10px 0px"
            >删除</el-button
          >
        </div>
        <div class="sharecontent_header_left">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalNum"
          >
          </el-pagination>
        </div>
      </div>
      <div class="sharecontent_content">
        <el-table
          :data="tableDataOfTime"
          border
          stripe
          style="width: 100%"
          ref="multipleTable"
          :max-height="HeightList1"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column fixed prop="rule_type" label="预警类型">
            <template slot-scope="scope">
              <span>{{ scope.row.rule_type | afterTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="预警名称"> </el-table-column>
          <el-table-column fixed prop="warning_type" label="预警节点">
          </el-table-column>
          <el-table-column prop="duration" label="超时时长">
            <template slot-scope="scope">
              <span>{{ scope.row.duration }}分钟</span>
            </template>
          </el-table-column>
          <el-table-column prop="interval_time" label="通知时间间隔">
            <template slot-scope="scope">
              <span>{{ scope.row.interval_time }}分钟</span>
            </template>
          </el-table-column>
          <el-table-column prop="is_enable" label="是否启用"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                data-tracker="P35-4"
                @click="handleModifyTime(scope.row, (isModify = true))"
                v-permission="'earlywarning_rule_update'"
                >编辑</el-button
              >
              <el-button
                @click="handleClickTime(scope.row)"
                data-tracker="P35-3"
                type="text"
                size="small"
                v-permission="'earlywarning_rule_detail'"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="addWarehouse">
        <el-drawer
          :title="
            (isModify === true ? '修改' : onlyRead === true ? '' : '新增') +
            '超时预警'
          "
          :visible.sync="timeVisible"
          size="55%"
          :before-close="handleCloseTime"
          :wrapperClosable="false"
        >
          <div class="form_content">
            <el-form
              :inline="true"
              class="demo-form-inline"
              label-position="left"
              label-width="110px"
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              style="overflow: hidden"
            >
              <el-form-item label="预警名称" prop="warningName">
                <el-input
                  v-model="ruleForm.warningName"
                  :disabled="onlyRead"
                  style="width: 195px"
                ></el-input>
              </el-form-item>
              <el-form-item
                style="margin-left: 40px"
                label-width="90px"
                label="预警节点"
                prop="warningType"
              >
                <el-select
                  v-model="ruleForm.nodeType"
                  style="width: 195px"
                  :disabled="onlyRead"
                >
                  <el-option label="揽收" value="1">揽收</el-option>
                  <el-option label="干线" value="3">干线</el-option>
                  <el-option label="配送" value="4">配送</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="承运类型" prop="waybill_product_type">
                <el-select
                  style="width: 195px"
                  v-model="ruleForm.waybill_product_type"
                  :disabled="onlyRead"
                >
                  <el-option
                    v-for="type in transportsType"
                    :key="type.id"
                    :label="type.name"
                    :value="type.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="超时时长"
                style="margin-left: 40px"
                label-width="90px"
                prop="timeLimit"
              >
                <el-input
                  v-model="ruleForm.timeLimit"
                  type="number"
                  style="width: 105px; margin: 0 5px"
                  :disabled="onlyRead"
                ></el-input>
                <el-select
                  v-model="ruleForm.unit"
                  style="width: 80px"
                  placeholder="单位"
                  :disabled="onlyRead"
                >
                  <el-option label="天" value="天" />
                  <el-option label="小时" value="小时" />
                  <el-option label="分钟" value="分钟" />
                </el-select>
              </el-form-item>
              <el-form-item label="通知时间间隔" prop="warningInterval">
                <el-input
                  v-model="ruleForm.warningInterval"
                  type="number"
                  style="width: 160px; margin-right: 5px"
                  :disabled="onlyRead"
                ></el-input
                >分钟
              </el-form-item>
              <el-form-item
                label="是否启用"
                style="margin-left: 40px"
                label-width="90px"
                prop="isUse"
              >
                <el-radio-group v-model="ruleForm.isUse" :disabled="onlyRead">
                  <el-radio
                    v-for="status in useStatusList"
                    :key="status.item_code"
                    :label="status.item_name"
                  ></el-radio>
                </el-radio-group>
              </el-form-item>
              <div style="position: relative">
                <div
                  class="left_form"
                  v-for="(item, index) in ruleForm.arrar"
                  :key="index"
                  style="position: relative"
                >
                  <el-form-item label="通知角色" prop="warningTarget">
                    <el-select
                      v-model="item.warningTarget"
                      style="width: 195px"
                      :multiple="true"
                      :disabled="onlyRead"
                    >
                      <el-option
                        v-for="item in noticelist"
                        :key="item.key"
                        :label="item.value"
                        :value="item.key"
                      >
                      </el-option>
                      <!-- <el-option label="当前运单状态运营负责人" value="1" />
                          <el-option label="当前运单状态操作负责人" value="2" />
                          <el-option label="当前运单状态调度负责人" value="3" />
                          <el-option label="当前运单状态司机" value="4" />
                          <el-option label="当前运单状态出发网点所属大区商服" value="5" />
                          <el-option label="当前运单状态目的网点所属大区商服" value="6" /> -->
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="通知类型"
                    size="mini"
                    style="margin-left: 40px"
                    label-width="90px"
                    prop="infoType"
                  >
                    <el-select
                      v-model="item.infoType"
                      style="width: 195px"
                      :multiple="true"
                      placeholder="可多选"
                      :disabled="onlyRead"
                    >
                      <el-option
                        :label="type.item_name"
                        :value="type.item_code"
                        v-for="type in infoTypeList"
                        :key="type.item_code"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="通知内容" prop="bindWarningContentName">
                    <el-select
                      v-model="item.bindWarningContentName"
                      style="width: 195px"
                      :disabled="onlyRead"
                      @change="bindWarningContentNameFn(index, $event)"
                    >
                      <el-option
                        v-for="content in EarlywarningOptions"
                        :key="content.key"
                        :label="content.value"
                        :value="content"
                      />
                    </el-select>
                  </el-form-item>
                  <div
                    class="right_icon"
                    @click="DeletePushDataFn(index)"
                    style="position: absolute; right: 7px; top: 0px"
                    v-if="!onlyRead"
                  >
                    <i
                      class="el-icon-remove-outline"
                      style="font-size: 24px"
                    ></i>
                  </div>
                </div>
                <div
                  class="right_icon"
                  style="position: absolute; right: 7px"
                  @click="addPushDataFn"
                  v-if="!onlyRead"
                >
                  <i
                    class="el-icon-circle-plus-outline"
                    style="font-size: 24px"
                  ></i>
                </div>
              </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button
                :data-tracker="isModify === true ? 'P35-12' : 'P35-10'"
                @click="timeVisible = false"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="confirmCreateTime"
                v-show="!onlyRead"
                :data-tracker="isModify === true ? 'P35-11' : 'P35-9'"
                >确 定</el-button
              >
            </span>
          </div>
        </el-drawer>
      </div>
    </div>
    <div class="sharecontent" v-if="activeName === 'second'">
      <div class="sharecontent_header">
        <div class="sharecontent_header_right">
          <el-button
            type="primary"
            plain
            @click="tempVisibleFn"
            data-tracker="P35-5"
            style="margin: 0px 10px 10px 0px"
            v-permission="'earlywarning_rule_create'"
            >新增</el-button
          >
          <el-button
            type="primary"
            plain
            @click="deleteRules"
            data-tracker="P35-6"
            style="margin: 0px 10px 10px 0px"
            v-permission="'earlywarning_rule_delete'"
            >删除</el-button
          >
        </div>
        <div class="sharecontent_header_left">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalNum"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 表单内容 -->
      <div class="sharecontent_content">
        <el-table
          :data="tableDataOfTemp"
          border
          style="width: 100%"
          ref="multipleTable"
          @selection-change="handleSelectionChange"
          :max-height="HeightList2"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column fixed prop="rule_type" label="预警类型" width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.rule_type | afterTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="预警名称" width="300">
          </el-table-column>

          <el-table-column prop="interval_time" label="通知时间间隔">
            <template slot-scope="scope">
              <span>{{ scope.row.interval_time }}分钟</span>
            </template>
          </el-table-column>
          <el-table-column prop="thermosphere" label="温层">
            <template slot-scope="scope">
              {{ getThermoName(scope.row.thermosphere) }}
            </template>
          </el-table-column>
          <el-table-column prop="is_enable" label="是否启用" width="100">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                data-tracker="P35-8"
                @click="handleModifyTemp(scope.row, (isModify = true))"
                v-permission="'earlywarning_rule_update'"
              >
                编辑</el-button
              >
              <el-button
                @click="handleClickTemp(scope.row)"
                data-tracker="P35-7"
                type="text"
                size="small"
                v-permission="'earlywarning_rule_detail'"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 弹框内容 -->
      <div class="addWarehouse">
        <el-drawer
          :title="
            (isModify === true ? '修改' : onlyRead === true ? '' : '新增') +
            '超温预警'
          "
          :visible.sync="tempVisible"
          size="55%"
          :before-close="handleCloseTemp"
          :wrapperClosable="false"
        >
          <div class="form_content" style="overflow: hidden">
            <el-form
              :inline="true"
              class="demo-form-inline"
              label-width="110px"
              label-position="left"
              :model="ruleForm"
              :rules="rules"
              :disabled="onlyRead"
              ref="ruleForm"
            >
              <el-form-item label="预警名称" prop="warningName">
                <el-input
                  v-model="ruleForm.warningName"
                  :disabled="onlyRead"
                  style="width: 195px"
                ></el-input>
              </el-form-item>
              <el-form-item
                style="margin-left: 40px"
                label-width="80px"
                label="温层"
                size="mini"
                prop="thermosphere"
              >
                <el-select
                  v-model="ruleForm.thermosphere"
                  clearable
                  placeholder="请选择"
                  style="width: 195px"
                  :disabled="onlyRead"
                >
                  <el-option
                    v-for="item in ThermosphereType"
                    :key="item.item_code"
                    :label="item.item_name"
                    :value="item.item_code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="通知时间间隔" prop="warningInterval">
                <el-input
                  v-model="ruleForm.warningInterval"
                  type="number"
                  style="width: 160px; margin-right: 5px"
                  :disabled="onlyRead"
                ></el-input
                >分钟
              </el-form-item>

              <el-form-item
                style="margin-left: 40px"
                label-width="80px"
                label="是否启用"
                prop="isUse"
              >
                <el-radio-group v-model="ruleForm.isUse" :disabled="onlyRead">
                  <el-radio
                    v-for="status in useStatusList"
                    :key="status.item_code"
                    :label="status.item_name"
                  ></el-radio>
                </el-radio-group>
              </el-form-item>
              <div class="temp" v-if="ruleForm.temperature_configs">
                <p class="temp_title">温度预警设置</p>
                <div
                  class="temp_configs"
                  v-for="(item, index) in ruleForm.temperature_configs"
                  :key="index"
                >
                  <div class="configs_left">
                    低于
                    <el-form-item label="" prop="lower_temperature">
                      <el-input
                        class="temp_input"
                        oninput="value=value.replace(/[^-?\d+(\.\d+)?$]/g,'')"
                        v-model="item.lower_temperature"
                      ></el-input>
                    </el-form-item>
                    高于
                    <el-form-item label="" prop="upper_temperature">
                      <el-input
                        class="temp_input"
                        oninput="value=value.replace(/[^-?\d+(\.\d+)?$]/g,'')"
                        v-model="item.upper_temperature"
                      ></el-input>
                    </el-form-item>
                    ℃进行预警，运单底色标记为
                    <el-color-picker
                      :predefine="predefineColors"
                      style="vertical-align: middle"
                      v-model="item.color"
                      size="mini"
                    ></el-color-picker>
                    色
                  </div>
                  <div class="icons_right">
                    <div v-if="!onlyRead">
                      <i
                        @click="handleAddTempConfig"
                        class="el-icon-circle-plus-outline"
                        style="font-size: 24px"
                      ></i>
                    </div>
                    <div
                      v-if="!onlyRead && index > 0"
                      style="width: 24px; margin-left: 10px"
                    >
                      <i
                        @click="handleDelTempConfig(index)"
                        class="el-icon-remove-outline"
                        style="font-size: 24px"
                      ></i>
                    </div>
                  </div>
                </div>
              </div>
              <div style="position: relative">
                <div
                  class="left_form"
                  v-for="(item, index) in ruleForm.arrar"
                  :key="index"
                  style="position: relative"
                >
                  <el-form-item label="通知角色" prop="warningTarget">
                    <el-select
                      v-model="item.warningTarget"
                      style="width: 195px"
                      :multiple="true"
                      :disabled="onlyRead"
                    >
                      <el-option
                        v-for="item in noticelist"
                        :key="item.key"
                        :label="item.value"
                        :value="item.key"
                      >
                      </el-option>
                      <!-- <el-option label="当前运单状态运营负责人" value="1" />
                          <el-option label="当前运单状态操作负责人" value="2" />
                          <el-option label="当前运单状态调度负责人" value="3" />
                          <el-option label="当前运单状态司机" value="4" />
                          <el-option label="当前运单状态出发网点所属大区商服" value="5" />
                          <el-option label="当前运单状态目的网点所属大区商服" value="6" /> -->
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="通知类型"
                    size="mini"
                    prop="infoType"
                    style="margin-left: 40px"
                    label-width="80px"
                  >
                    <el-select
                      v-model="item.infoType"
                      style="width: 195px"
                      :multiple="true"
                      placeholder="可多选"
                      :disabled="onlyRead"
                    >
                      <el-option
                        :label="type.item_name"
                        :value="type.item_code"
                        v-for="type in infoTypeList"
                        :key="type.item_code"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="通知内容" prop="bindWarningContentName">
                    <el-select
                      v-model="item.bindWarningContentName"
                      style="width: 195px"
                      :disabled="onlyRead"
                      @change="bindWarningContentNameFn(index, $event)"
                    >
                      <el-option
                        v-for="content in EarlywarningOptions"
                        :key="content.key"
                        :label="content.value"
                        :value="content"
                      />
                    </el-select>
                  </el-form-item>
                  <div
                    class="right_icon"
                    @click="DeletePushDatatempFn(index)"
                    style="position: absolute; right: 7px; top: 0px"
                    v-if="!onlyRead"
                  >
                    <i
                      class="el-icon-remove-outline"
                      style="font-size: 24px"
                    ></i>
                  </div>
                </div>
                <div
                  class="right_icon"
                  style="position: absolute; right: 7px"
                  @click="addPushDatatempFn"
                  v-if="!onlyRead"
                >
                  <i
                    class="el-icon-circle-plus-outline"
                    style="font-size: 24px"
                  ></i>
                </div>
              </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button
                :data-tracker="isModify === true ? 'P35-16' : 'P35-14'"
                @click="tempVisible = false"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="confirmCreateTemp"
                v-show="!onlyRead"
                :data-tracker="isModify === true ? 'P35-15' : 'P35-13'"
                >确 定</el-button
              >
            </span>
          </div>
        </el-drawer>
      </div>
    </div>
    <div class="sharecontent" v-if="activeName === 'three'">
      <div class="sharecontent_header">
        <div class="sharecontent_header_right">
          <el-button
            type="primary"
            plain
            @click="tempVisibleFnObj"
            data-tracker="P35-5"
            style="margin: 0px 10px 10px 0px"
            v-permission="'earlywarning_rule_create'"
            >新增</el-button
          >
          <el-button
            type="primary"
            plain
            @click="deleteRules"
            data-tracker="P35-6"
            style="margin: 0px 10px 10px 0px"
            v-permission="'earlywarning_rule_delete'"
            >删除</el-button
          >
        </div>
        <div class="sharecontent_header_left">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalNum"
          >
          </el-pagination>
        </div>
      </div>
      <div class="sharecontent_content">
        <el-table
          :data="tableDataoutage"
          border
          style="width: 100%"
          ref="multipleTable"
          @selection-change="handleSelectionChange"
          :max-height="HeightList3"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column fixed prop="rule_type" label="预警类型" width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.rule_type | afterTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="预警名称" width="300">
          </el-table-column>

          <el-table-column prop="interval_time" label="通知时间间隔">
            <template slot-scope="scope">
              <span>{{ scope.row.interval_time }}分钟</span>
            </template>
          </el-table-column>
          <el-table-column prop="duration" label="周期触发警告">
          </el-table-column>
          <el-table-column prop="is_enable" label="是否启用" width="100">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                data-tracker="P35-8"
                @click="handleModifyTempTab(scope.row, (isModify = true))"
                v-permission="'earlywarning_rule_update'"
              >
                编辑</el-button
              >
              <el-button
                @click="handleClickTempTab(scope.row)"
                data-tracker="P35-7"
                type="text"
                size="small"
                v-permission="'earlywarning_rule_detail'"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="addWarehouse">
        <el-drawer
          :title="
            (isModify === true ? '修改' : onlyRead === true ? '' : '新增') +
            '断电离线预警'
          "
          :visible.sync="tempVisibleObj"
          size="50%"
          :wrapperClosable="false"
        >
          <div class="form_content" style="overflow: hidden">
            <el-form
              :inline="true"
              class="demo-form-inline"
              label-width="80px"
              label-position="left"
              :model="ruleFormTage"
              :rules="ruleFormrules"
              :disabled="onlyRead"
              ref="ruleFormTage"
            >
              <el-form-item label="预警名称" prop="name">
                <el-input
                  v-model="ruleFormTage.name"
                  :disabled="onlyRead"
                  style="width: 195px"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="通知时间间隔"
                prop="interval_time"
                label-width="110px"
              >
                <el-input
                  v-model="ruleFormTage.interval_time"
                  type="number"
                  style="width: 160px; margin-right: 5px"
                  :disabled="onlyRead"
                ></el-input
                >分钟
              </el-form-item>

              <el-form-item label="是否启用" prop="is_enable">
                <el-radio v-model="ruleFormTage.is_enable" label="0"
                  >启用</el-radio
                >
                <el-radio v-model="ruleFormTage.is_enable" label="1"
                  >禁用</el-radio
                >
              </el-form-item>
              <div class="temp" v-if="ruleForm.temperature_configs">
                <p class="temp_title">离线预警设置</p>
                <div class="temp_configstabl">
                  <div class="configs_left">
                    断电
                    <el-input
                      class="temp_input"
                      @input="oninputTabg"
                      v-model="ruleFormTage.duration"
                    ></el-input>
                    采集周期后触发告警
                  </div>
                </div>
              </div>
              <div style="position: relative">
                <div
                  class="left_form"
                  v-for="(item, index) in ruleFormTage.notices"
                  :key="index"
                  style="position: relative"
                >
                  <el-form-item
                    label="通知角色"
                    :prop="'notices.' + index + '.receiver'"
                    :rules="ruleFormrules.receiver"
                  >
                    <el-select
                      v-model="item.receiver"
                      style="width: 195px"
                      :multiple="true"
                      :disabled="onlyRead"
                    >
                      <el-option
                        v-for="item in noticelist"
                        :key="item.key"
                        :label="item.value"
                        :value="item.key"
                      >
                      </el-option>
                      <!-- <el-option label="当前运单状态运营负责人" value="1" />
                          <el-option label="当前运单状态操作负责人" value="2" />
                          <el-option label="当前运单状态调度负责人" value="3" />
                          <el-option label="当前运单状态司机" value="4" />
                          <el-option label="当前运单状态出发网点所属大区商服" value="5" />
                          <el-option label="当前运单状态目的网点所属大区商服" value="6" /> -->
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="通知类型"
                    size="mini"
                    style="margin-left: 40px"
                    :prop="'notices.' + index + '.notification_type'"
                    :rules="ruleFormrules.notification_type"
                    label-width="80px"
                  >
                    <el-select
                      v-model="item.notification_type"
                      style="width: 195px"
                      :multiple="true"
                      placeholder="可多选"
                      :disabled="onlyRead"
                    >
                      <el-option
                        :label="type.item_name"
                        :value="type.item_code"
                        v-for="type in infoTypeList"
                        :key="type.item_code"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="通知内容"
                    :prop="'notices.' + index + '.template_id'"
                    :rules="ruleFormrules.template_id"
                  >
                    <el-select
                      v-model="item.template_id"
                      style="width: 195px"
                      :disabled="onlyRead"
                    >
                      <el-option
                        v-for="content in EarlywarningOptions"
                        :key="content.key"
                        :label="content.value"
                        :value="content.key"
                      />
                    </el-select>
                  </el-form-item>
                  <div
                    class="right_icon"
                    @click="DeletePushDatatempFnTage(index)"
                    style="position: absolute; right: 7px; top: 0px"
                    v-if="!onlyRead"
                  >
                    <i
                      class="el-icon-remove-outline"
                      style="font-size: 24px"
                    ></i>
                  </div>
                </div>
                <div
                  class="right_icon"
                  style="position: absolute; right: 7px"
                  @click="addPushDatatempFnTage"
                  v-if="!onlyRead"
                >
                  <i
                    class="el-icon-circle-plus-outline"
                    style="font-size: 24px"
                  ></i>
                </div>
              </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button
                :data-tracker="isModify === true ? 'P35-16' : 'P35-14'"
                @click="tempVisibleObj = false"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="confirmCreateTempTage('ruleFormTage')"
                v-show="!onlyRead"
                :data-tracker="isModify === true ? 'P35-15' : 'P35-13'"
                >确 定</el-button
              >
            </span>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>

<script>
import {
  AddOvertime,
  OverContentList,
  OverRuleList,
  reqDictionaryOptions,
  AmendOvertime,
  DeleteOvertime,
  getTransportsList,
  EarlywarningDetail,
  EarlywarningOptions,
  noticeoptions,
} from "@/api/earlywarning";
export default {
  data() {
    return {
      HeightList1: "auto",
      HeightList2: "auto",
      HeightList3: "auto",
      activeName: "first",
      draweTage: true,
      tempVisibleObj: false,
      ruleForm: {
        nodeType: "", //节点类型
        isUse: "启用", //是否启用
        waybill_product_type: "", //产品承运类型
        timeLimit: "", //超时时间标准
        unit: "分钟", //单位
        warningInterval: "", //通知时间间隔
        thermosphere: "",
        warningName: "", //名称
        minTemp: "", //温度下限差值
        maxTemp: "", //温度上限差值
        arrar: [
          {
            warningTarget: [], //通知对象
            infoType: [], //通知类型
            bindWarningContent: "", //绑定预警内容
            bindWarningContentName: "",
          },
        ],
        temperature_configs: [
          {
            upper_temperature: "", //温度上限预警值
            lower_temperature: "", //温度下限预警值
            color: "#FFBF6B",
          },
          {
            upper_temperature: "", //温度上限预警值
            lower_temperature: "", //温度下限预警值
            color: "#DE868F",
          },
          {
            upper_temperature: "", //温度上限预警值
            lower_temperature: "", //温度下限预警值
            color: "#BD3124",
          },
        ],
      },
      rules: {
        warningName: [
          { required: true, message: "请输入名称", trigger: "blur" },
        ],
        warningType: [
          { required: true, message: "请输入预警类型", trigger: "blur" },
        ],
        waybill_product_type: [
          { required: true, message: "请选择承运产品类型", trigger: "blur" },
        ],
        warningInterval: [
          { required: true, message: "请选输入通知时间间隔", trigger: "blur" },
        ],
        timeLimit: [
          { required: true, message: "请输入超时时间标准", trigger: "blur" },
        ],
        isUse: [{ required: true, message: "请输入是否启用", trigger: "blur" }],
        warningTarget: [
          { required: true, message: "请选择通知对象", trigger: "blur" },
        ],
        infoType: [
          { required: true, message: "请选择通知类型", trigger: "blur" },
        ],
        bindWarningContentName: [
          { required: true, message: "请选择预警内容", trigger: "blur" },
        ],
        thermosphere: [
          { required: true, message: "请选择温层", trigger: "blur" },
        ],
        minTemp: [
          { required: true, message: "请输入预警温区", trigger: "blur" },
        ],
        // lower_temperature: [
        //   { required: true, message: "温度下限预警值", trigger: "blur" },
        // ],
        // upper_temperature: [
        //   { required: true, message: "温度上限预警值", trigger: "blur" },
        // ],
      },
      tableDataOfTime: [
        {
          warningType: "1", //预警类型
          isUse: "2", //是否启用
          nodeType: "3", //节点类型
          warningTarget: "4", //通知对象
          timeLimit: "5", //超时时间标准
          unit: "6", //单位
          warningInterval: "7", //通知时间间隔
          infoType: "8", //通知类型
          warningName: "9", //名称
          bindWarningContent: [], //绑定预警内容
        },
      ],
      timeVisible: false, //判断弹框显示隐藏
      tableDataOfTemp: [
        {
          warningType: "1", //预警类型
          isUse: "2", //是否启用
          warningValue: "3", //预警值
          warningTarget: "4", //通知对象
          warningInterval: "5", //通知时间间隔
          infoType: "6", //通知类型
          warningName: "7", //名称
          bindWarningContent: [], //绑定预警内容
          minTemp: "8", //温度下限差值
          maxTemp: "9", //温度上限差值
        },
      ],
      tableDataoutage: [],
      ruleFormTage: {
        rule_type: "3",
        name: "",
        interval_time: "5",
        duration: "1",
        is_enable: "0",
        notices: [
          {
            receiver: [],
            notification_type: [],
            template_id: "",
            template_name: "断电内容",
          },
        ],
      },
      ruleFormrules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        interval_time: [
          { required: true, message: "请输入预警时间", trigger: "blur" },
        ],
        receiver: [
          { required: true, message: "请输入通知角色", trigger: "blur" },
        ],
        notification_type: [
          { required: true, message: "请输入通知类型", trigger: "blur" },
        ],
        template_id: [
          { required: true, message: "请输入通知内容", trigger: "blur" },
        ],
      },
      tempVisible: false, //判断弹框显示隐藏
      pageSize: 20, //一页几条
      pageNum: 1, //第几页
      totalNum: 100, //列表总数
      useStatusList: [], //启用状态
      infoTypeList: [], //通知类型
      nodeTypeList: [], //节点类型
      contentList: [], //预警内容列表
      warningType: [], //预警类型
      onlyRead: false, //详情只读
      isModify: false, //是否是修改
      multipleSelection: [], //多选项
      transportsType: [], //承运产品类型
      ThermosphereType: [], //温层
      warningId: "",
      warningDataId: "",
      EarlywarningOptions: [], //预警内容模板
      orderIdNums: [],
      OperateStat: [],
      predefineColors: [
        "#BD3124",
        "#DE868F",
        "#FFD2D2",
        "#FF731F",
        "#FDA16A",
        "#FFBF6B",
        "#FAE600",
        "#FFF581",
        "#0047FA",
        "#00B2FF",
      ],
      noticelist: [],
    };
  },
  components: {},

  filters: {
    afterTime(value) {
      if (value == 1) {
        return "超时预警";
      } else if (value == 2) {
        return "超温预警";
      } else if (value == 3) {
        return "离线预警";
      }
    },
  },
  mounted() {
    this.displayLists(this.activeName === "first" ? "1" : "2");
    this.EarlywarningOptionsFn(this.activeName === "first" ? "1" : "2");
    this.getOptionsList();
    this.dictionaryBatchFn();
    this.PreservationFn();
    this.OperateStatusFn();
    this.noticeoptionsdata();
  },
  watch: {
    $route: {
      handler(newV, oldV) {
        if (this.$route.query.type == 0) {
          this.tabpaneFN({ name: "first" });
        } else if (this.$route.query.type == 1) {
          this.tabpaneFN({ name: "second" });
        } else if (this.$route.query.type == 2) {
          this.tabpaneFN({ name: "three" });
        }
        // console.log(
        //   this.$route.query.type,
        //   this.activeName,
        //   "this.$route.query.type"
        // );
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    handleAddTempConfig() {
      if (this.ruleForm.temperature_configs.length >= 5) {
        this.$message({
          type: "warning",
          message: "最多可以设置5条预警规则哦",
        });
      } else {
        this.ruleForm.temperature_configs.push({});
      }
    },
    handleDelTempConfig(index) {
      this.ruleForm.temperature_configs.splice(index, 1);
    },
    getThermoName(themo) {
      const tItem =
        (this.ThermosphereType || []).find(
          (item) => item.item_code === themo
        ) || {};
      return tItem.item_name;
    },
    timeVisibleFn() {
      this.isModify = false;
      this.onlyRead = false;
      this.timeVisible = true;
      this.ruleForm.warningName = "";
      this.ruleForm.thermosphere = "";
      this.ruleForm.warningInterval = "";
      this.ruleForm.minTemp = "";
      this.ruleForm.maxTemp = "";
      this.ruleForm.isUse = "启用";
      this.ruleForm.arrar = [
        {
          warningTarget: [], //通知对象
          infoType: [], //通知类型
          bindWarningContent: "", //绑定预警内容
          bindWarningContentName: "",
        },
      ];
    },
    tempVisibleFn() {
      this.isModify = false;
      this.onlyRead = false;
      this.tempVisible = true;
      this.ruleForm.nodeType = "";
      this.ruleForm.isUse = "启用";
      this.ruleForm.waybill_product_type = "";
      this.ruleForm.timeLimit = "";
      this.ruleForm.unit = "分钟";
      this.ruleForm.warningInterval = "";
      this.ruleForm.thermosphere = "";
      this.ruleForm.warningName = "";
      this.ruleForm.minTemp = "";
      this.ruleForm.maxTemp = "";
      this.ruleForm.arrar = [
        {
          warningTarget: [], //通知对象
          infoType: [], //通知类型
          bindWarningContent: "", //绑定预警内容
          bindWarningContentName: "",
        },
      ];
    },
    tempVisibleFnObj() {
      this.tempVisibleObj = true;
      // this.Object()
    },
    blurhandle() {
      var res = document.getElementById("inputtd").value;
      var resdata = res.slice(0, 3);
      document.getElementById("inputtd").value = resdata;
    },
    blurhandleMax() {
      var res = document.getElementById("inputMax").value;
      var resdata = res.slice(0, 3);
      document.getElementById("inputMax").value = resdata;
    },
    PreservationFn() {
      const data = {
        dictionary_code: "thermosphere",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000) {
          this.ThermosphereType = res.data.list;
        }
      });
    },
    OperateStatusFn() {
      const data = {
        dictionary_code: "alert_node",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000) {
          this.OperateStat = res.data.list;
        }
      });
    },
    addPushDataFn() {
      this.ruleForm.arrar.push({
        warningTarget: "", //通知对象
        infoType: "", //通知类型
        bindWarningContent: "", //绑定预警内容
      });
    },
    DeletePushDataFn(index) {
      if (this.ruleForm.arrar.length !== 1) {
        this.ruleForm.arrar.splice(index, 1);
      } else {
        this.$message({
          type: "success",
          message: "最后一条数据无法删除",
        });
      }
    },
    addPushDatatempFn() {
      this.ruleForm.arrar.push({
        warningTarget: "", //通知对象
        infoType: "", //通知类型
        bindWarningContent: "", //绑定预警内容
      });
    },
    DeletePushDatatempFn(index) {
      if (this.ruleForm.arrar.length !== 1) {
        this.ruleForm.arrar.splice(index, 1);
      } else {
        this.$message({
          type: "success",
          message: "最后一条数据无法删除",
        });
      }
    },
    DeletePushDatatempFnTage(index) {
      if (this.ruleFormTage.notices.length !== 1) {
        this.ruleFormTage.notices.splice(index, 1);
      } else {
        this.$message({
          type: "success",
          message: "最后一条数据无法删除",
        });
      }
    },
    addPushDatatempFnTage() {
      this.ruleFormTage.notices.push({
        receiver: "", //通知对象
        notification_type: "", //通知类型
        template_id: "", //绑定预警内容
      });
    },
    bindWarningContentNameFn(index, val) {
      this.ruleForm.arrar[index].bindWarningContent = val.key;
      this.ruleForm.arrar[index].bindWarningContentName = val.value;
    },
    dictionaryBatchFn() {
      const data = {
        is_all: false,
      };
      getTransportsList(data).then((res) => {
        if (res.code === 10000) {
          this.transportsType = res.data.data;
        }
      });
    },
    tabpaneFN(val) {
      this.activeName = val.name;
      if (this.activeName == "first") {
        this.displayLists("1");
        this.EarlywarningOptionsFn("1");
        this.pageSize = 20; //一页多少条
        this.pageNum = 1; //第多少页
      } else if (this.activeName == "second") {
        this.displayLists("2");
        this.EarlywarningOptionsFn("2");
        this.pageSize = 20; //一页多少条
        this.pageNum = 1; //第多少页
      } else if (this.activeName == "three") {
        this.displayLists("3");
        this.EarlywarningOptionsFn("3");
        this.pageSize = 20; //一页多少条
        this.pageNum = 1; //第多少页
      }
    },
    EarlywarningOptionsFn(num) {
      const data = {
        template_type: num,
      };
      EarlywarningOptions(data).then((res) => {
        if (res.code === 10000) {
          this.EarlywarningOptions = res.data;
        }
      });
    },
    async displayLists(val) {
      let result = await OverRuleList({
        page: this.pageNum,
        page_size: this.pageSize,
        name: "",
        rule_type: val,
      });
      if (result.code === 10000 && result.data.list !== null) {
        result.data.list.forEach((item) => {
          item.warning_type =
            item.warning_type === "1"
              ? "揽收"
              : item.warning_type === "2"
              ? "仓储"
              : item.warning_type === "3"
              ? "干线"
              : item.warning_type === "4"
              ? "配送"
              : item.warning_type === "5"
              ? "回单"
              : "对账";
          item.is_enable = item.is_enable === "1" ? "禁用" : "启用";
        });

        if (val == 1) {
          this.tableDataOfTime = result.data.list;
          if (this.tableDataOfTime.length > 5) {
            this.HeightList1 = document.documentElement.clientHeight - 200;
          } else {
            this.HeightList1 = "auto";
          }
        } else if (val == 2) {
          this.tableDataOfTemp = result.data.list;
          if (this.tableDataOfTemp.length > 5) {
            this.HeightList2 = document.documentElement.clientHeight - 200;
          } else {
            this.HeightList2 = "auto";
          }
        } else if (val == 3) {
          this.tableDataoutage = result.data.list;
          if (this.tableDataoutage.length > 5) {
            this.HeightList3 = document.documentElement.clientHeight - 200;
          } else {
            this.HeightList3 = "auto";
          }
        }
        this.pageNum = result.data.pagination.current_page;
        this.pageSize = result.data.pagination.per_page_count;
        this.totalNum = result.data.pagination.total;
      } else {
        this.tableDataOfTime = [];
        this.tableDataOfTemp = [];
        this.tableDataoutage = [];
        this.pageNum = 1;
        this.pageSize = 20;
        this.totalNum = 0;
      }
    },
    async getOptionsList() {
      let result1 = await reqDictionaryOptions({
        dictionary_code: "is_enable",
      });
      this.useStatusList = result1.data.list;
      let result2 = await reqDictionaryOptions({
        dictionary_code: "notification",
      });
      this.infoTypeList = result2.data.list;
      let result3 = await reqDictionaryOptions({
        dictionary_code: "nodetype",
      });
      this.nodeTypeList = result3.data.list;
      // let result4 = await OverContentList({
      //   page: this.pageNum,
      //   page_size: this.pageSize,
      //   name: "",
      // });
      // this.contentList = result4.data.list;
      let result5 = await reqDictionaryOptions({
        dictionary_code: "earlywarning",
      });
      this.warningTypeList = result5.data.list;
    },
    handleClickTime(val) {
      //查看详情

      const data = {
        id: val.id,
      };
      EarlywarningDetail(data).then((res) => {
        if (res.code === 10000) {
          this.timeVisible = true;
          this.onlyRead = true;
          this.isModify = false;
          this.ruleForm.nodeType = res.data.warning_type;
          this.ruleForm.waybill_product_type = res.data.waybill_type;
          this.ruleForm.isUse = res.data.is_enable === "0" ? "启用" : "禁用";
          this.ruleForm.timeLimit = res.data.interval_time;
          this.ruleForm.warningInterval = res.data.duration;
          this.ruleForm.warningName = res.data.name;
          this.ruleForm.minTemp = res.data.min_temperature / 10;
          this.ruleForm.maxTemp = res.data.max_temperature / 10;
          this.ruleForm.arrar = [];
          res.data.notices.forEach((item) => {
            const result = this.noticelist
              .filter((data) => item.receiver.includes(data.key))
              .map((data) => data.key);
            this.ruleForm.arrar.push({
              warningTarget: result,
              infoType: item.notification_type,
              bindWarningContentName: item.template_name,
              bindWarningContent: item.template_id,
            });
          });
        }
      });
    },
    handleClickTempTab(val) {
      this.tempVisibleObj = true;
      this.onlyRead = true;
      this.handleModifyTempTabdetail(val);
    },
    handleModifyTempTab(val) {
      this.tempVisibleObj = true;
      this.onlyRead = false;
      this.handleModifyTempTabdetail(val);
    },
    handleModifyTempTabdetail(val) {
      this.warningDataId = val.id;
      const data = {
        id: val.id,
      };
      EarlywarningDetail(data).then((res) => {
        if (res.code == 10000) {
          this.ruleFormTage = { ...res.data };
          // console.log(this.ruleFormTage, "=========");
          var arrarList = [];
          res.data.notices.forEach((item) => {
            const result = this.noticelist
              .filter((data) => item.receiver.includes(data.key))
              .map((data) => data.key);
            arrarList.push({
              receiver: result,
              notification_type: item.notification_type,
              template_name: item.template_name,
              template_id: item.template_id,
            });
          });
          this.ruleFormTage.notices = arrarList;
          // // console.log(this.ruleFormTage, "  // console.log(res)")
        }
      });
    },
    handleClickTemp(val) {
      //查看详情
      const data = {
        id: val.id,
      };
      EarlywarningDetail(data).then((res) => {
        if (res.code === 10000) {
          this.tempVisible = true;
          this.onlyRead = true;
          this.isModify = false;
          this.ruleForm.thermosphere = res.data.thermosphere;
          this.ruleForm.nodeType = res.data.warning_type;
          this.ruleForm.isUse = res.data.is_enable === "0" ? "启用" : "禁用";
          this.ruleForm.timeLimit = res.data.duration;
          this.ruleForm.warningInterval = res.data.interval_time;
          this.ruleForm.warningName = res.data.name;
          this.ruleForm.minTemp = res.data.min_temperature / 10;
          this.ruleForm.maxTemp = res.data.max_temperature / 10;
          this.ruleForm.arrar = [];
          this.ruleForm.temperature_configs = res.data.temperature_configs;
          res.data.notices.forEach((item) => {
            const result = this.noticelist
              .filter((data) => item.receiver.includes(data.key))
              .map((data) => data.key);
            this.ruleForm.arrar.push({
              warningTarget: result,
              infoType: item.notification_type,
              bindWarningContentName: item.template_name,
              bindWarningContent: item.template_id,
            });
          });
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val; //一页多少条
      if (this.activeName == "first") {
        this.displayLists("1");
      } else if (this.activeName == "second") {
        this.displayLists("2");
      } else if (this.activeName == "three") {
        this.displayLists("3");
      }
    },
    handleCurrentChange(val) {
      this.pageNum = val; //第多少页
      if (this.activeName == "first") {
        this.displayLists("1");
      } else if (this.activeName == "second") {
        this.displayLists("2");
      } else if (this.activeName == "three") {
        this.displayLists("3");
      }
    },
    async confirmCreateTime() {
      if (this.ruleForm.warningName == "") {
        this.$message({
          message: "名称不能为空",
          type: "error",
        });
      } else if (this.ruleForm.nodeType == "") {
        this.$message({
          message: "节点类型不能为空",
          type: "error",
        });
      } else if (this.ruleForm.waybill_product_type == "") {
        this.$message({
          message: "承运产品类型不能为空",
          type: "error",
        });
      } else if (this.ruleForm.timeLimit === "") {
        this.$message({
          message: "超时时间标准不能为空",
          type: "error",
        });
      } else if (this.ruleForm.warningInterval === "") {
        this.$message({
          message: "通知时间间隔不能为空",
          type: "error",
        });
      } else if (
        this.ruleForm.arrar.map((item) => {
          return item.warningTarget.length;
        }) == 0
      ) {
        this.$message({
          message: "通知对象不能为空",
          type: "error",
        });
      } else if (
        this.ruleForm.arrar.map((item) => {
          return item.infoType.length;
        }) == 0
      ) {
        this.$message({
          message: "通知类型不能为空",
          type: "error",
        });
      } else if (
        this.ruleForm.arrar.map((item) => {
          return item.bindWarningContentName;
        }) == ""
      ) {
        this.$message({
          message: "预警绑定不能为空",
          type: "error",
        });
      } else {
        const noticesData = this.ruleForm.arrar.map((item) => {
          return {
            receiver: item.warningTarget,
            notification_type: item.infoType,
            template_id: item.bindWarningContent + "",
            template_name: item.bindWarningContentName + "",
          };
        });
        let { ruleForm } = this;
        let result;
        if (this.isModify) {
          result = await AmendOvertime({
            id: this.warningId,
            waybill_type: ruleForm.waybill_product_type + "",
            rule_type: "1",
            warning_type: ruleForm.nodeType + "",
            name: ruleForm.warningName,
            duration:
              ruleForm.unit === "天"
                ? ruleForm.timeLimit * 1440 + ""
                : ruleForm.unit === "小时"
                ? ruleForm.timeLimit * 60 + ""
                : ruleForm.timeLimit * 1 + "",
            max_temperature: "1",
            min_temperature: "1",
            interval_time: ruleForm.warningInterval + "",
            is_enable: ruleForm.isUse === "启用" ? "0" : "1",
            notices: noticesData,
          });
        } else {
          result = await AddOvertime({
            rule_type: "1",
            waybill_type: ruleForm.waybill_product_type + "",
            warning_type: ruleForm.nodeType + "",
            name: ruleForm.warningName + "",
            duration:
              ruleForm.unit === "天"
                ? ruleForm.timeLimit * 1440 + ""
                : ruleForm.unit === "小时"
                ? ruleForm.timeLimit * 60 + ""
                : ruleForm.timeLimit * 1 + "",
            max_temperature: "1",
            min_temperature: "1",
            interval_time: ruleForm.warningInterval * 1 + "",
            is_enable: ruleForm.isUse === "启用" ? "0" : "1",
            notices: noticesData,
          });
          this.isModify = false;
        }
        this.onlyRead = false;
        this.timeVisible = false;
        this.$message({
          type: "success",
          message: "success",
        });
        this.displayLists(this.activeName === "first" ? "1" : "2");
        Object.assign(this.$data.ruleForm, this.$options.data().ruleForm);
        this.isModify = "";
      }
    },
    async confirmCreateTemp() {
      var type_lsit = this.ruleForm.temperature_configs;

      var checkTemperatureConfigs_list =
        this.checkTemperatureConfigs(type_lsit);

      let noticesData = this.ruleForm.arrar.map((item) => {
        return {
          receiver: item.warningTarget,
          notification_type: item.infoType,
          template_id: item.bindWarningContent + "",
          template_name: item.bindWarningContentName + "",
        };
      });
      if (this.ruleForm.warningName == "") {
        this.$message({
          message: "名称不能为空",
          type: "error",
        });
      } else if (this.ruleForm.thermosphere == "") {
        this.$message({
          message: "温层不能为空",
          type: "error",
        });
      } else if (this.ruleForm.warningInterval == "") {
        this.$message({
          message: "通知时间间隔不能为空",
          type: "error",
        });
      } else if (checkTemperatureConfigs_list) {
        this.$message({
          message: "温度预警不能空",
          type: "error",
        });
      }
      // else if (this.ruleForm.minTemp === "") {
      //   this.$message({
      //     message: "温度区间最小值不能为空",
      //     type: "error",
      //   });
      // } else if (this.ruleForm.maxTemp === "") {
      //   this.$message({
      //     message: "温度区间最大值不能为空",
      //     type: "error",
      //   });
      // }
      else if (
        this.ruleForm.arrar.map((item) => {
          return item.warningTarget.length;
        }) == 0
      ) {
        this.$message({
          message: "通知对象不能为空",
          type: "error",
        });
      } else if (
        this.ruleForm.arrar.map((item) => {
          return item.infoType.length;
        }) == 0
      ) {
        this.$message({
          message: "通知类型不能为空",
          type: "error",
        });
      } else if (
        this.ruleForm.arrar.map((item) => {
          return item.bindWarningContentName;
        }) == ""
      ) {
        this.$message({
          message: "预警绑定不能为空",
          type: "error",
        });
      } else {
        let { ruleForm } = this;
        let res;
        if (this.isModify) {
          res = await AmendOvertime({
            id: this.warningDataId,
            rule_type: "2",
            warning_type: ruleForm.nodeType + "",
            thermosphere: ruleForm.thermosphere + "",
            name: ruleForm.warningName + "",
            duration:
              ruleForm.unit === "天"
                ? ruleForm.timeLimit * 1440 + ""
                : ruleForm.unit === "小时"
                ? ruleForm.timeLimit * 60 + ""
                : ruleForm.timeLimit * 1 + "",
            // max_temperature: ruleForm.maxTemp * 10 + "",
            // min_temperature: ruleForm.minTemp * 10 + "",
            interval_time: ruleForm.warningInterval * 1 + "",
            is_enable: ruleForm.isUse === "启用" ? "0" : "1",
            notices: noticesData,
            temperature_configs: ruleForm.temperature_configs,
          });
        } else {
          res = await AddOvertime({
            rule_type: "2",
            warning_type: ruleForm.nodeType + "",
            thermosphere: ruleForm.thermosphere + "",
            name: ruleForm.warningName + "",
            duration:
              ruleForm.unit === "天"
                ? ruleForm.timeLimit * 1440 + ""
                : ruleForm.unit === "小时"
                ? ruleForm.timeLimit * 60 + ""
                : ruleForm.timeLimit * 1 + "",
            // max_temperature: ruleForm.maxTemp * 10 + "",
            // min_temperature: ruleForm.minTemp * 10 + "",
            interval_time: ruleForm.warningInterval * 1 + "",
            is_enable: ruleForm.isUse === "启用" ? "0" : "1",
            notices: noticesData,
            temperature_configs: ruleForm.temperature_configs,
          });
          this.isModify = false;
        }
        if (res.code === 10000) {
          this.onlyRead = false;
          this.tempVisible = false;
          this.$message({
            type: "success",
            message: "编辑预警成功",
          });
          this.displayLists(this.activeName === "first" ? "1" : "2");
          Object.assign(this.$data.ruleForm, this.$options.data().ruleForm);
          this.isModify = "";
        }
      }
    },
    confirmCreateTempTage(ruleFormTage) {
      this.$refs[ruleFormTage].validate((valid) => {
        if (valid) {
          if (this.isModify) {
            var param = {
              ...this.ruleFormTage,
              id: this.warningDataId,
            };
            AmendOvertime(param).then((res) => {
              if (res.code == 10000) {
                this.displayLists("3");
                this.EarlywarningOptionsFn("3");
                Object.assign(
                  this.$data.ruleFormTage,
                  this.$options.data().ruleFormTage
                );
                this.tempVisibleObj = false;
              }
            });
          } else {
            var param = {
              ...this.ruleFormTage,
            };
            AddOvertime(param).then((res) => {
              if (res.code == 10000) {
                this.displayLists("3");
                this.EarlywarningOptionsFn("3");
                Object.assign(
                  this.$data.ruleFormTage,
                  this.$options.data().ruleFormTage
                );
                this.tempVisibleObj = false;
              }
            });
          }
        } else {
        }
      });
    },
    handleCloseTime() {
      //关闭超时
      this.timeVisible = false;
      this.onlyRead = false;
    },
    handleCloseTemp() {
      //关闭超温
      this.tempVisible = false;
      this.onlyRead = false;
    },
    handleModifyTime(val) {
      this.warningId = val.id;
      this.isModify = true;
      this.onlyRead = false;
      //修改超时
      const data = {
        id: val.id,
      };
      EarlywarningDetail(data).then((res) => {
        if (res.code === 10000) {
          this.timeVisible = true;
          this.ruleForm.nodeType = res.data.warning_type;
          this.ruleForm.waybill_product_type = res.data.waybill_type;
          this.ruleForm.isUse = res.data.is_enable === "0" ? "启用" : "禁用";
          this.ruleForm.timeLimit = res.data.duration;
          this.ruleForm.warningInterval = res.data.interval_time;
          this.ruleForm.warningName = res.data.name;
          this.ruleForm.minTemp = res.data.min_temperature / 10;
          this.ruleForm.maxTemp = res.data.max_temperature / 10;
          this.ruleForm.arrar = [];
          res.data.notices.forEach((item) => {
            // console.log(item.receiver, "item.receiver");
            const result = this.noticelist
              .filter((data) => item.receiver.includes(data.key))
              .map((data) => data.key);
            // console.log(this.noticelist, "this.noticelist");
            this.ruleForm.arrar.push({
              warningTarget: result,
              infoType: item.notification_type,
              bindWarningContentName: item.template_name,
              bindWarningContent: item.template_id,
            });
          });
        }
      });
    },
    handleModifyTemp(val) {
      this.isModify = true;
      this.onlyRead = false;
      this.warningDataId = val.id;
      //修改超温
      const data = {
        id: val.id,
      };
      EarlywarningDetail(data).then((res) => {
        if (res.code === 10000) {
          this.tempVisible = true;
          // console.log(this.activeName, "faslkdj");
          if (this.activeName != "three") {
            this.ruleForm.nodeType = res.data.warning_type;
            this.ruleForm.thermosphere = res.data.thermosphere;
            this.ruleForm.isUse = res.data.is_enable === "0" ? "启用" : "禁用";
            this.ruleForm.timeLimit = res.data.duration;
            this.ruleForm.warningInterval = res.data.interval_time;
            this.ruleForm.warningName = res.data.name;
            this.ruleForm.minTemp = res.data.min_temperature / 10;
            this.ruleForm.maxTemp = res.data.max_temperature / 10;
            if (res.data.temperature_configs) {
              this.ruleForm.temperature_configs = res.data.temperature_configs;
            } else {
              this.ruleForm.temperature_configs = [{}];
            }
            this.ruleForm.arrar = [];
            res.data.notices.forEach((item) => {
              const result = this.noticelist
                .filter((data) => item.receiver.includes(data.key))
                .map((data) => data.key);
              this.ruleForm.arrar.push({
                warningTarget: result,
                infoType: item.notification_type,
                bindWarningContentName: item.template_name,
                bindWarningContent: item.template_id,
              });
            });
          } else {
            this.ruleFormTage = res.data;
          }
        }
      });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // handleSelectionChange(val) {
    //   this.multipleSelection = val;
    // },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (val.length > 0) {
        for (var i = 0; i < this.multipleSelection.length; i++) {
          this.orderIdNums = this.multipleSelection.map((item) =>
            Number(item.id)
          );
        }
      } else {
        this.orderIdNums = [];
      }
    },
    oninputTabg(value) {
      const reg = /^[1-9]\d*$/;
      var valueType = reg.test(value);
      if (valueType) {
        this.ruleFormTage.duration = value;
      } else {
        this.ruleFormTage.duration = "";
        this.$message({
          message: "请输入大于0的正整数",
          type: "warning",
        });
      }
    },

    async deleteRules() {
      let data = {
        ids: this.orderIdNums,
      };
      if (this.orderIdNums.length > 0) {
        await DeleteOvertime(data);
        this.$message({
          type: "success",
          message: "删除成功",
        });
        if (this.activeName == "first") {
          this.displayLists("1");
          // this.EarlywarningOptionsFn("1");
        } else if (this.activeName == "second") {
          this.displayLists("2");
          // this.EarlywarningOptionsFn("2");
        } else if (this.activeName == "three") {
          this.displayLists("3");
          // this.EarlywarningOptionsFn("3");
        }
        // this.displayLists(this.activeName === "first" ? "1" : "2");
      } else {
        this.$message({
          type: "error",
          message: "请至少选择一条数据删除",
        });
      }
    },
    checkTemperatureConfigs(type_lsit) {
      for (var i = 0; i < type_lsit.length; i++) {
        var config = type_lsit[i];
        if (
          config.upper_temperature === "" ||
          config.lower_temperature === ""
        ) {
          return true; // 存在空值，返回true
        }
      }
      return false; // 不存在空值，返回false
    },
    noticeoptionsdata() {
      var param = {};
      noticeoptions(param).then((res) => {
        this.noticelist = res.data.options;
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-form--inline .el-form-item__label {
  // text-align: left !important;
  // padding-left: 30px;
}

.shareContainer {
  padding: 10px;
  background-color: #fff;

  // 内容
  .sharecontent {
    background: white;

    // 头部内容
    .sharecontent_header {
      .sharecontent_header_right {
        display: inline-block;
      }

      .sharecontent_header_left {
        float: right;
        padding: 0px 10px 0px 0px;
      }
    }

    // 表单内容
    .sharecontent_content {
    }

    .addWarehouse {
      .form_content {
        padding: 0 15px;

        .el-form {
          .el-form-item {
            //width: 350px;
          }
        }
      }
    }
  }
}

.dialog-footer {
  width: 50%;
  text-align: center;
  position: fixed;
  bottom: 30px;
  left: 50%;
}

.left_form {
  width: 100%;
  float: left;
}

.right_icon {
  width: 5%;
  float: left;
}

/deep/.temp_input {
  width: 60px;

  input {
    border-radius: 0;
    border: none;
    border-bottom: solid 1px #dcdfe6;
  }
}

.temp {
  .temp_title {
    color: #72767b;
    font-size: 14px;
    line-height: 28px;
    padding-bottom: 10px;
  }

  .temp_configs {
    display: flex;
    justify-content: space-between;
    padding: 0 21px 20px;
    font-size: 14px;

    .configs_left {
      color: #606266;
    }

    .icons_right {
      display: flex;
    }
  }

  .temp_configstabl {
    display: flex;
    justify-content: space-between;
    padding: 0 0px 20px 0px;
    font-size: 14px;

    .configs_left {
      color: #606266;
    }

    .icons_right {
      display: flex;
    }
  }
}
</style>